<template>
    <div>
        <h1>会员修改页面</h1>
        <table class="table table bordered">
            <tbody>
                <tr>
                    <td align="right">会员账号</td>
                    <td><input type="text" v-model="queryInfo.Name"></td>
                </tr>

                <tr>
                    <td align="right">密码</td>
                    <td><input type="password" v-model="queryInfo.Pwd"></td>
                </tr>

                <tr>
                    <td align="right">确认密码</td>
                    <td><input type="password" v-model="PwdOk"></td>
                </tr>

                <tr>
                    <td align="right">手机号</td>
                    <td><input type="text" v-model="queryInfo.Phone"></td>
                </tr>

                <tr>
                    <td align="right">身份证</td>
                    <td><input type="text" v-model="queryInfo.Card"></td>
                </tr>

                <tr>
                    <td align="right">生日</td>
                    <td><input type="date" v-model="queryInfo.Birthday"></td>
                </tr>

                <tr>
                    <td align="right">性别</td>
                    <td>
                        <input type="radio" name="sex" v-model="queryInfo.Sex" value="1">男
                        <input type="radio" name="sex" v-model="queryInfo.Sex" value="0">女
                    </td>
                </tr>

                <tr>
                    <td align="right">积分</td>
                    <td><input type="text" v-model="queryInfo.Points"></td>
                </tr>

                <tr>
                    <td align="right">余额</td>
                    <td><input type="text" v-model="queryInfo.Money"></td>
                </tr>

                <tr>
                    <td align="right">会员等级</td>
                    <td>
                        <select v-model="queryInfo.LevelId">
                            <option value="0">请选择</option>
                            <option :value="item.Id" v-for="item in queryLevel.LevelName" :key="item.Id">{{item.LevelName}}</option>
                        </select>
                    </td>
                </tr>

                <tr>
                    <td></td>
                    <td>
                        <input type="button" value="修改" @click="ok">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import { ref,reactive, onMounted } from 'vue'

import axios from 'axios';

import { useRouter,useRoute } from 'vue-router';

const router = useRouter();

const route = useRoute();

//数据-----------------------------------------------------------

//接受后端返回的数据
let queryLevel:any = reactive({
    LevelName:[],
})

//向后端传递的数据
let queryInfo = reactive({
  Id: route.query.id,
  Name: '',
  Phone: '',
  Card: '',
  Birthday: '',
  Sex: '1',
  Pwd: '',
  Money: '',
  Points: '',
  LevelId: '0',
})

//确认密码
let PwdOk = ref('');

//函数-----------------------------------------------------------
//页面一打开就需要获取会员等级列表
onMounted(() => {
    getLevelList();
    getdate();
})

const getdate = () => {
    axios({
        url:'/api/Member/GetMemberInfo',
        method:'get',
        params:{
            id:route.query.id,
        }
    })
    .then((res) => {
        console.log(res);
        queryInfo.Name = res.data.Name;
        queryInfo.Phone = res.data.Phone;
        queryInfo.Card = res.data.Card;
        queryInfo.Birthday = res.data.Birthday;
        queryInfo.Sex = res.data.Sex;
        queryInfo.Pwd = res.data.Pwd;
        queryInfo.Money = res.data.Money;
        queryInfo.Points = res.data.Points;
        queryInfo.LevelId = res.data.LevelId;
        PwdOk.value = res.data.Pwd;
    })
    .catch((err) => {
        console.log(err);
    })
}

//获取会员等级列表
const getLevelList = () => {
    axios({
        url:'/api/Member/GetMemberLevels',
        method:'get',
    })
    .then((res) => {
        console.log(res);
        //需要存储起来
        queryLevel.LevelName = res.data;
    })
    .catch((err) => {
        console.log(err);
    })
}


const ok = () => {
    //1.非空+有效性验证
    if(queryInfo.Name == '')
    {
        alert('账号不能为空');
        return;
    }
    if(queryInfo.Card == '')
    {
        alert('身份证号不能为空');
        return;
    }
    if(queryInfo.Pwd=='')
    {
        alert('密码不能为空');
        return;
    }
    if(PwdOk.value=='')
    {
        alert('确认密码不能为空');
        return;
    }
    if(queryInfo.Pwd!=PwdOk.value)
    {
        alert('两次密码不一致');
        return;
    }
    if(queryInfo.Phone == '')
    {
        alert('手机号不能为空');
        return;
    }
    if(queryInfo.Birthday == '')
    {
        alert('生日不能为空');
        return;
    }
    if(queryInfo.Points == '')
    {
        alert('积分不能为空');
        return;
    }
    if(queryInfo.Money == '')
    {
        alert('余额不能为空');
        return;
    }
    //是否是正确的手机号
    let reg = /^1[3-9]\d{9}$/;
    if(reg.test(queryInfo.Phone)==false)
    {
        alert('手机号不合法');
        return;
    }
    let reg1 = /^\d{17}[0-9Xx]$/;
    if(reg1.test(queryInfo.Card)==false)
    {
        alert('身份证号不合法');
        return;
    }
    //判断一个字符串是否是数字，如果是数字则返回true，否则返回false
    //Number()函数将字符串转换为数字，如果转换失败则返回NaN
    if(isNaN(Number(queryInfo.Points))==true)
    {
        alert('积分只能是数字');
        return;
    }
    if(isNaN(Number(queryInfo.Money))==true)
    {
        alert('余额只能是数字');
        return;
    }
    //会员等级下拉框
    if(queryInfo.LevelId=='')
    {
        alert('会员等级必选');
        return;
    }
    //2.发送请求
    axios({
        url:'/api/Member/UpdateMemberInfo',
        method:'put',
        data:queryInfo
    })
    .then(res=>{
        //发送网络请求成功时调用的函数 相当于success
        console.log(res);
        if(res.data==1)
        {
            alert('修改成功');
            router.push('/memberlist');
        }
        else{
            alert('修改失败');
            return;
        }
    })
    .catch(err=>{
        //发送网络请求失败时调用的函数 相当于error
        console.log(err);
    })
}


</script>

<style scoped>

</style>